import React, { useEffect, useState } from 'react'
import { GetPointsMallogList } from '../../api/coin'
import NavBar from '../../components/Navbar'
import './index.less'

function ExchangeLog() {
  const [pointList, setPointList] = useState([])

  const getList = () => {
    GetPointsMallogList().then((res) => {
      setPointList(res?.data || [])
    })
  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <div>
      <NavBar title="兑换记录" />
      <div className="log_list">
        {pointList.map((i) => (
          <div className="log_item" key={i.id}>
            <div className="item_img">
              <img src={i.img} alt="" />
            </div>
            <div className="item_info">
              <div className="tit ellipsis1e">{i.name}</div>
              <div className="price">{i.point}积分</div>
            </div>
            <div className="item_num">
              <span className="x">x</span> <span className="n">{i.num || 1}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ExchangeLog
